<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="Hexo Theme Redefine">
    
    <meta name="author" content="loskyertt">
    <!-- preconnect -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    
    <!--- Seo Part-->
    
    <link rel="canonical" href="http://example.com/2024/07/30/docker-openwrt/"/>
    <meta name="robots" content="index,follow">
    <meta name="googlebot" content="index,follow">
    <meta name="revisit-after" content="1 days">
    
        <meta name="description" content="这是一篇如何在 Linux 环境下，用 Docker 搭建 Openwrt 作旁路由的教程。">
<meta property="og:type" content="article">
<meta property="og:title" content="Openwrt 在 Docker 下运行并作为旁路由">
<meta property="og:url" content="http://example.com/2024/07/30/Docker-Openwrt/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="这是一篇如何在 Linux 环境下，用 Docker 搭建 Openwrt 作旁路由的教程。">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://im.gurl.eu.org/file/15123858a31e537afcf88.png">
<meta property="og:image" content="https://im.gurl.eu.org/file/bd3ae00cf631639f8637d.png">
<meta property="og:image" content="https://im.gurl.eu.org/file/d29cd0f0a8b49c85eba19.png">
<meta property="og:image" content="https://im.gurl.eu.org/file/5fa57afd8c3f1ce85dbaf.png">
<meta property="og:image" content="https://im.gurl.eu.org/file/3238679faab643583e0d2.png">
<meta property="og:image" content="https://im.gurl.eu.org/file/c0ac4b0af36dd0d8d8669.png">
<meta property="og:image" content="https://im.gurl.eu.org/file/30d7d1cc582bb21af4a3e.png">
<meta property="og:image" content="https://im.gurl.eu.org/file/fe9361ef16f1efec66bf1.png">
<meta property="og:image" content="https://im.gurl.eu.org/file/5cbd9d8cdb9722e37a8eb.png">
<meta property="og:image" content="https://im.gurl.eu.org/file/e906fa1645fab9b347b8d.png">
<meta property="article:published_time" content="2024-07-30T01:32:03.000Z">
<meta property="article:modified_time" content="2024-08-09T16:41:50.963Z">
<meta property="article:author" content="John Doe">
<meta property="article:tag" content="docker">
<meta property="article:tag" content="linux">
<meta property="article:tag" content="proxy">
<meta property="article:tag" content="openwrt">
<meta property="article:tag" content="虚拟机">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://im.gurl.eu.org/file/15123858a31e537afcf88.png">
    
    
    <!--- Icon Part-->
    <link rel="icon" type="image/png" href="/images/redefine-favicon.svg" sizes="192x192">
    <link rel="apple-touch-icon" sizes="180x180" href="/images/redefine-favicon.svg">
    <meta name="theme-color" content="#A31F34">
    <link rel="shortcut icon" href="/images/redefine-favicon.svg">
    <!--- Page Info-->
    
    <title>
        
            Openwrt 在 Docker 下运行并作为旁路由 -
        
        sky&#39;s blog
    </title>

    
<link rel="stylesheet" href="/fonts/Chillax/chillax.css">


    <!--- Inject Part-->
    

    
<link rel="stylesheet" href="/css/style.css">


    
        
<link rel="stylesheet" href="/assets/build/styles.css">

    

    
<link rel="stylesheet" href="/fonts/GeistMono/geist-mono.css">

    
<link rel="stylesheet" href="/fonts/Geist/geist.css">

    <!--- Font Part-->
    
    
    
    

    
        
<script src="/js/libs/anime.min.js"></script>

    

    <script id="hexo-configurations">
    window.config = {"hostname":"example.com","root":"/","language":"en","path":"search.xml"};
    window.theme = {"articles":{"style":{"font_size":"16px","line_height":1.5,"image_border_radius":"14px","image_alignment":"center","image_caption":true,"link_icon":true,"title_alignment":"left","headings_top_spacing":{"h1":"3.2rem","h2":"2.4rem","h3":"1.9rem","h4":"1.6rem","h5":"1.4rem","h6":"1.3rem"}},"word_count":{"enable":true,"count":true,"min2read":true},"author_label":{"enable":true,"auto":false,"list":["Unknown"]},"code_block":{"copy":true,"style":"mac","font":{"enable":false,"family":null,"url":null}},"toc":{"enable":true,"max_depth":3,"number":false,"expand":true,"init_open":true},"copyright":{"enable":true,"default":"cc_by_nc_sa"},"lazyload":true,"recommendation":{"enable":true,"title":"推荐阅读","limit":3,"mobile_limit":2,"placeholder":"/images/wallhaven-wqery6-light.webp","skip_dirs":[]}},"colors":{"primary":"#A31F34","secondary":null,"default_mode":"light"},"global":{"fonts":{"chinese":{"enable":false,"family":null,"url":null},"english":{"enable":false,"family":null,"url":null}},"content_max_width":"1000px","sidebar_width":"210px","hover":{"shadow":true,"scale":false},"scroll_progress":{"bar":false,"percentage":true},"website_counter":{"url":"https://cn.vercount.one/js","enable":true,"site_pv":true,"site_uv":true,"post_pv":true},"single_page":true,"preloader":true,"open_graph":true,"google_analytics":{"enable":false,"id":null}},"home_banner":{"enable":true,"style":"fixed","image":{"light":"/images/wallhaven-wqery6-light.webp","dark":"/images/wallhaven-wqery6-dark.webp"},"title":"吾日三省吾身","subtitle":{"text":["Loading..."],"hitokoto":{"enable":true,"api":"https://v1.hitokoto.cn"},"typing_speed":100,"backing_speed":80,"starting_delay":500,"backing_delay":1500,"loop":true,"smart_backspace":true},"text_color":{"light":"#fff","dark":"#d1d1b6"},"text_style":{"title_size":"2.8rem","subtitle_size":"1.5rem","line_height":1.2},"custom_font":{"enable":false,"family":null,"url":null},"social_links":{"enable":true,"style":"default","links":{"github":"https://github.com/loskyertt","instagram":null,"zhihu":null,"twitter":"https://x.com/loskyertt","email":"loskyertt@cug.edu.cn"},"qrs":{"weixin":null}}},"plugins":{"feed":{"enable":false},"aplayer":{"enable":false,"type":"fixed","audios":[{"name":null,"artist":null,"url":null,"cover":null,"lrc":null}]},"mermaid":{"enable":false,"version":"9.3.0"}},"version":"2.6.4","navbar":{"auto_hide":false,"color":{"left":"#f78736","right":"#367df7","transparency":35},"width":{"home":"1200px","pages":"1000px"},"links":{"Home":{"path":"/","icon":"fa-regular fa-house"},"Google":{"path":"https://ww.google.com/","icon":"fa-brands fa-google"},"Archives":{"path":"/archives","icon":"fa-regular fa-archive"}},"search":{"enable":true,"preload":true}},"page_templates":{"friends_column":2,"tags_style":"blur"},"home":{"sidebar":{"enable":true,"position":"left","first_item":"menu","announcement":null,"show_on_mobile":true,"links":null},"article_date_format":"YYYY-MM-DD","categories":{"enable":true,"limit":3},"tags":{"enable":true,"limit":3}},"footerStart":"2022/8/17 11:45:14"};
    window.lang_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"};
    window.data = {"masonry":false};
  </script>
    
    <!--- Fontawesome Part-->
    
<link rel="stylesheet" href="/fontawesome/fontawesome.min.css">

    
<link rel="stylesheet" href="/fontawesome/brands.min.css">

    
<link rel="stylesheet" href="/fontawesome/solid.min.css">

    
<link rel="stylesheet" href="/fontawesome/regular.min.css">

    
    
    
    
<meta name="generator" content="Hexo 7.3.0"></head>


<body>
<div class="progress-bar-container">
    

    
        <span class="pjax-progress-bar"></span>
<!--        <span class="swup-progress-icon">-->
<!--            <i class="fa-solid fa-circle-notch fa-spin"></i>-->
<!--        </span>-->
    
</div>



    <style>
    :root {
        --preloader-background-color: #fff;
        --preloader-text-color: #000;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --preloader-background-color: #202124;
            --preloader-text-color: #fff;
        }
    }

    @media (prefers-color-scheme: light) {
        :root {
            --preloader-background-color: #fff;
            --preloader-text-color: #000;
        }
    }

    @media (max-width: 600px) {
        .ml13 {
            font-size: 2.6rem !important; /* Adjust this value as needed */
        }
    }

    .preloader {
        display: flex;
        flex-direction: column;
        gap: 1rem; /* Tailwind 'gap-4' is 1rem */
        align-items: center;
        justify-content: center;
        position: fixed;
        padding: 12px;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100vw;
        height: 100vh; /* 'h-screen' is 100% of the viewport height */
        background-color: var(--preloader-background-color);
        z-index: 1100; /* 'z-[1100]' sets the z-index */
        transition: opacity 0.2s ease-in-out;
    }

    .ml13 {
        font-size: 3.2rem;
        /* text-transform: uppercase; */
        color: var(--preloader-text-color);
        letter-spacing: -1px;
        font-weight: 500;
        font-family: 'Chillax-Variable', sans-serif;
        text-align: center;
    }

    .ml13 .word {
        display: inline-flex;
        flex-wrap: wrap;
        white-space: nowrap;
    }

    .ml13 .letter {
        display: inline-block;
        line-height: 1em;
    }
</style>

<div class="preloader">
    <h2 class="ml13">
        sky&#39;s blog
    </h2>
    <script>
        var textWrapper = document.querySelector('.ml13');
        // Split text into words
        var words = textWrapper.textContent.trim().split(' ');

        // Clear the existing content
        textWrapper.innerHTML = '';

        // Wrap each word and its letters in spans
        words.forEach(function(word) {
            var wordSpan = document.createElement('span');
            wordSpan.classList.add('word');
            wordSpan.innerHTML = word.replace(/\S/g, "<span class='letter'>$&</span>");
            textWrapper.appendChild(wordSpan);
            textWrapper.appendChild(document.createTextNode(' ')); // Add space between words
        });

        var animation = anime.timeline({loop: true})
            .add({
                targets: '.ml13 .letter',
                translateY: [40,0],
                translateZ: 0,
                opacity: [0,1],
                filter: ['blur(5px)', 'blur(0px)'], // Starting from blurred to unblurred
                easing: "easeOutExpo",
                duration: 1400,
                delay: (el, i) => 300 + 30 * i,
            }).add({
                targets: '.ml13 .letter',
                translateY: [0,-40],
                opacity: [1,0],
                filter: ['blur(0px)', 'blur(5px)'], // Ending from unblurred to blurred
                easing: "easeInExpo",
                duration: 1200,
                delay: (el, i) => 100 + 30 * i,
                complete: function() {
                    hidePreloader(); // Call hidePreloader after the animation completes
                }
            });

        let themeStatus = JSON.parse(localStorage.getItem('REDEFINE-THEME-STATUS'))?.isDark;

        // If the theme status is not found in local storage, check the preferred color scheme
        if (themeStatus === undefined || themeStatus === null) {
            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                themeStatus = 'dark';
            } else {
                themeStatus = 'light';
            }
        }

        // Now you can use the themeStatus variable in your code
        if (themeStatus) {
            document.documentElement.style.setProperty('--preloader-background-color', '#202124');
            document.documentElement.style.setProperty('--preloader-text-color', '#fff');
        } else {
            document.documentElement.style.setProperty('--preloader-background-color', '#fff');
            document.documentElement.style.setProperty('--preloader-text-color', '#000');
        }

        window.addEventListener('load', function () {
            setTimeout(hidePreloader, 5000); // Call hidePreloader after 5000 milliseconds if not already called by animation
        });

        function hidePreloader() {
            var preloader = document.querySelector('.preloader');
            preloader.style.opacity = '0';
            setTimeout(function () {
                preloader.style.display = 'none';
            }, 200);
        }
    </script>
</div>

<main class="page-container" id="swup">

    

    <div class="main-content-container">


        <div class="main-content-header">
            <header class="navbar-container px-6 md:px-12">

    <div class="navbar-content ">
        <div class="left">
            
            <a class="logo-title" href="/">
                
                sky&#39;s blog
                
            </a>
        </div>

        <div class="right">
            <!-- PC -->
            <div class="desktop">
                <ul class="navbar-list">
                    
                        
                            

                            <li class="navbar-item">
                                <!-- Menu -->
                                <a class=""
                                   href="/"
                                        >
                                    <i class="fa-regular fa-house fa-fw"></i>
                                    HOME
                                    
                                </a>

                                <!-- Submenu -->
                                
                            </li>
                    
                        
                            

                            <li class="navbar-item">
                                <!-- Menu -->
                                <a class=""
                                   target="_blank" rel="noopener" href="https://ww.google.com/"
                                        >
                                    <i class="fa-brands fa-google fa-fw"></i>
                                    GOOGLE
                                    
                                </a>

                                <!-- Submenu -->
                                
                            </li>
                    
                        
                            

                            <li class="navbar-item">
                                <!-- Menu -->
                                <a class=""
                                   href="/archives"
                                        >
                                    <i class="fa-regular fa-archive fa-fw"></i>
                                    ARCHIVES
                                    
                                </a>

                                <!-- Submenu -->
                                
                            </li>
                    
                    
                        <li class="navbar-item search search-popup-trigger">
                            <i class="fa-solid fa-magnifying-glass"></i>
                        </li>
                    
                </ul>
            </div>
            <!-- Mobile -->
            <div class="mobile">
                
                    <div class="icon-item search search-popup-trigger"><i class="fa-solid fa-magnifying-glass"></i>
                    </div>
                
                <div class="icon-item navbar-bar">
                    <div class="navbar-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Mobile sheet -->
    <div class="navbar-drawer h-screen w-full absolute top-0 left-0 bg-background-color flex flex-col justify-between">
        <ul class="drawer-navbar-list flex flex-col px-4 justify-center items-start">
            
                
                    

                    <li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
                        
                        <a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
                           href="/"
                        >
                            <span>
                                HOME
                            </span>
                            
                                <i class="fa-regular fa-house fa-sm fa-fw"></i>
                            
                        </a>
                        

                        
                    </li>
            
                
                    

                    <li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
                        
                        <a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
                           target="_blank" rel="noopener" href="https://ww.google.com/"
                        >
                            <span>
                                GOOGLE
                            </span>
                            
                                <i class="fa-brands fa-google fa-sm fa-fw"></i>
                            
                        </a>
                        

                        
                    </li>
            
                
                    

                    <li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
                        
                        <a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
                           href="/archives"
                        >
                            <span>
                                ARCHIVES
                            </span>
                            
                                <i class="fa-regular fa-archive fa-sm fa-fw"></i>
                            
                        </a>
                        

                        
                    </li>
            

            
            
        </ul>

        <div class="statistics flex justify-around my-2.5">
    <a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/tags">
        <div class="number text-2xl sm:text-xl text-second-text-color font-semibold">11</div>
        <div class="label text-third-text-color text-sm">Tags</div>
    </a>
    <a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/categories">
        <div class="number text-2xl sm:text-xl text-second-text-color font-semibold">0</div>
        <div class="label text-third-text-color text-sm">Categories</div>
    </a>
    <a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/archives">
        <div class="number text-2xl sm:text-xl text-second-text-color font-semibold">15</div>
        <div class="label text-third-text-color text-sm">Posts</div>
    </a>
</div>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="main-content-body">

            

            <div class="main-content">

                
                    <div class="post-page-container flex relative justify-between box-border w-full h-full">
    <div class="article-content-container">

        <div class="article-title relative w-full">
            
                <div class="w-full flex items-center pt-6 justify-start">
                    <h1 class="article-title-regular text-second-text-color tracking-tight text-4xl md:text-6xl font-semibold px-2 sm:px-6 md:px-8 py-3">Openwrt 在 Docker 下运行并作为旁路由</h1>
                </div>
            
            </div>

        
            <div class="article-header flex flex-row gap-2 items-center px-2 sm:px-6 md:px-8">
                <div class="avatar w-[46px] h-[46px] flex-shrink-0 rounded-medium border border-border-color p-[1px]">
                    <img src="/images/me.jpg">
                </div>
                <div class="info flex flex-col justify-between">
                    <div class="author flex items-center">
                        <span class="name text-default-text-color text-lg font-semibold">loskyertt</span>
                        
                            <span class="author-label ml-1.5 text-xs px-2 py-0.5 rounded-small text-third-text-color border border-shadow-color-1">Unknown</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fa-regular fa-pen-fancy"></i>&nbsp;
        <span class="desktop">2024-07-30 01:32:03</span>
        <span class="mobile">2024-07-30 01:32:03</span>
        <span class="hover-info">Created</span>
    </span>
    
        <span class="article-date article-meta-item">
            <i class="fa-regular fa-wrench"></i>&nbsp;
            <span class="desktop">2024-08-09 16:41:50</span>
            <span class="mobile">2024-08-09 16:41:50</span>
            <span class="hover-info">Updated</span>
        </span>
    

    
    
        <span class="article-tags article-meta-item">
            <i class="fa-regular fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/docker/">docker</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/linux/">linux</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/proxy/">proxy</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/openwrt/">openwrt</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/%E8%99%9A%E6%8B%9F%E6%9C%BA/">虚拟机</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
        <span class="article-wordcount article-meta-item">
            <i class="fa-regular fa-typewriter"></i>&nbsp;<span>3.5k Words</span>
        </span>
    
    
        <span class="article-min2read article-meta-item">
            <i class="fa-regular fa-clock"></i>&nbsp;<span>13 Mins</span>
        </span>
    
    
        <span class="article-pv article-meta-item">
            <i class="fa-regular fa-eye"></i>&nbsp;<span id="busuanzi_value_page_pv"></span>
        </span>
    
</div>

                    </div>
                </div>
            </div>
        

        


        <div class="article-content markdown-body px-2 sm:px-6 md:px-8 pb-8">
            <h1 id="1-前言"><a href="#1-前言" class="headerlink" title="1.前言"></a>1.前言</h1><p>这几天想试着玩一下<code>Openwrt</code>来作旁路由，但是又没有软路由固件，后来考虑到<code>Openwrt</code>也是基于 Linux 的，那么在 Docker Hub 上应该有其对应的镜像吧，然后查了下果真有。于是有了后续的操作 … …</p>
<p><strong>推荐的镜像：</strong> <a class="link"   target="_blank" rel="noopener" href="https://hub.docker.com/r/zzsrv/openwrt" >zzsrv&#x2F;openwrt <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h1 id="2-准备工作"><a href="#2-准备工作" class="headerlink" title="2.准备工作"></a>2.准备工作</h1><p>建议是在虚拟机上安装一个 Linux 系统，我在实体机上（Linux 系统）试了下，是能成功，但是在该电脑上无法访问<code>Openwrt</code>的 <code>ip</code>地址，在其它设备（比如手机）能正常访问（需要多做一些配置）。</p>
<h2 id="2-1-虚拟机安装"><a href="#2-1-虚拟机安装" class="headerlink" title="2.1 虚拟机安装"></a>2.1 虚拟机安装</h2><p>虚拟机在这里只推荐<code>VirtualBox</code>。<a class="link"   target="_blank" rel="noopener" href="https://www.virtualbox.org/wiki/Downloads" >下载地址 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<p>还需要下载插件：<a class="link"   target="_blank" rel="noopener" href="https://download.virtualbox.org/virtualbox/7.0.20/Oracle_VM_VirtualBox_Extension_Pack-7.0.20.vbox-extpack" >点这里 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a><br>或者点图片这里红色方框处的下载连接：<br><figure class="image-caption"><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="https://im.gurl.eu.org/file/15123858a31e537afcf88.png"
                      alt="图一"
                ><figcaption>图一</figcaption></figure></p>
<p>下载完后直接双击下载好后的扩展，就能自动安装到 VirtualBox 中。</p>
<h2 id="2-2-Linux安装"><a href="#2-2-Linux安装" class="headerlink" title="2.2 Linux安装"></a>2.2 Linux安装</h2><p>推荐的 Linux 发行版：</p>
<ul>
<li><a class="link"   target="_blank" rel="noopener" href="https://endeavouros.com/#Download" >EndeavourOS <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a> </li>
<li><a class="link"   target="_blank" rel="noopener" href="https://cachyos.org/download/" >CachyOS <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a>，建议下载<code>Desktop Edition</code>版本</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.linuxmint.com/download.php" >LinuxMint <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a>，建议下载<code>Xfce Edition</code>版本</li>
</ul>
<p>前两个是<code>Arch</code>系的发行版，<code>LinuxMint</code>应该是<code>Debian</code>系的发行版。我这里用的是<code>CachyOS</code>，因为正好想尝试下这个发行版，好处是配置有国内的镜像源，下载东西嘎嘎快。<br>在安装时最好选择有桌面环境，并且桌面选择<code>xfce4</code>，毕竟轻量嘛，在虚拟机里用着也会更流畅。当然，也可以不需要桌面环境，那么在安装时就必须把语言设置为英语，因为终端界面的中文会是乱码，而且没有图形化界面也不好配置。</p>
<h2 id="2-3-虚拟机的创建"><a href="#2-3-虚拟机的创建" class="headerlink" title="2.3 虚拟机的创建"></a>2.3 虚拟机的创建</h2><p><figure class="image-caption"><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="https://im.gurl.eu.org/file/bd3ae00cf631639f8637d.png"
                      alt="step1"
                ><figcaption>step1</figcaption></figure></p>
<p><figure class="image-caption"><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="https://im.gurl.eu.org/file/d29cd0f0a8b49c85eba19.png"
                      alt="step2"
                ><figcaption>step2</figcaption></figure></p>
<p><figure class="image-caption"><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="https://im.gurl.eu.org/file/5fa57afd8c3f1ce85dbaf.png"
                      alt="step3"
                ><figcaption>step3</figcaption></figure></p>
<p><figure class="image-caption"><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="https://im.gurl.eu.org/file/3238679faab643583e0d2.png"
                      alt="step3"
                ><figcaption>step3</figcaption></figure></p>
<h2 id="2-4-虚拟机的配置"><a href="#2-4-虚拟机的配置" class="headerlink" title="2.4 虚拟机的配置"></a>2.4 虚拟机的配置</h2><p>创建完虚拟机后，需要对其进行配置：</p>
<ul>
<li><p>网络配置：<br><figure class="image-caption"><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="https://im.gurl.eu.org/file/c0ac4b0af36dd0d8d8669.png"
                      alt="step1"
                ><figcaption>step1</figcaption></figure></p>
</li>
<li><p>显示配置<br><figure class="image-caption"><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="https://im.gurl.eu.org/file/30d7d1cc582bb21af4a3e.png"
                      alt="step2"
                ><figcaption>step2</figcaption></figure></p>
</li>
<li><p>镜像挂载<br><figure class="image-caption"><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="https://im.gurl.eu.org/file/fe9361ef16f1efec66bf1.png"
                      alt="step3"
                ><figcaption>step3</figcaption></figure></p>
</li>
</ul>
<h2 id="2-5-安装系统"><a href="#2-5-安装系统" class="headerlink" title="2.5 安装系统"></a>2.5 安装系统</h2><p>然后就是安装 Linux 系统，网上有很多教程，就不在这里讲了。</p>
<h1 id="3-Docker-配置"><a href="#3-Docker-配置" class="headerlink" title="3.Docker 配置"></a>3.Docker 配置</h1><h2 id="3-1-安装-Docker"><a href="#3-1-安装-Docker" class="headerlink" title="3.1 安装 Docker"></a>3.1 安装 Docker</h2><div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">sudo</span> pamcn -S docker</span><br></pre></td></tr></table></figure></div>

<p>可以通过下面指令查看是否安装成功：</p>
<div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">sudo</span> docker version</span><br></pre></td></tr></table></figure></div>
<p>如果输出类似下面内容就代表安装成功：</p>
<div class="highlight-container" data-rel="Txt"><figure class="iseeu highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">Client:</span><br><span class="line"> Version:           27.1.1</span><br><span class="line"> API version:       1.46</span><br><span class="line"> Go version:        go1.22.5</span><br><span class="line"> Git commit:        63125853e3</span><br><span class="line"> Built:             Thu Jul 25 17:06:22 2024</span><br><span class="line"> OS/Arch:           linux/amd64</span><br><span class="line"> Context:           default</span><br><span class="line"></span><br><span class="line">Server:</span><br><span class="line"> Engine:</span><br><span class="line">  Version:          27.1.1</span><br><span class="line">  API version:      1.46 (minimum version 1.24)</span><br><span class="line">  Go version:       go1.22.5</span><br><span class="line">  Git commit:       cc13f95251</span><br><span class="line">  Built:            Thu Jul 25 17:06:22 2024</span><br><span class="line">  OS/Arch:          linux/amd64</span><br><span class="line">  Experimental:     false</span><br><span class="line"> containerd:</span><br><span class="line">  Version:          v1.7.20</span><br><span class="line">  GitCommit:        8fc6bcff51318944179630522a095cc9dbf9f353.m</span><br><span class="line"> runc:</span><br><span class="line">  Version:          1.1.13</span><br><span class="line">  GitCommit:        </span><br><span class="line"> docker-init:</span><br><span class="line">  Version:          0.19.0</span><br><span class="line">  GitCommit:        de40ad0</span><br></pre></td></tr></table></figure></div>

<p>这里就不把当前用户组添加到<code>docker</code>了，总之记住，后续 <code>docker</code>的所有操作，都得用<code>sudo docker</code>。</p>
<h2 id="3-2-Docker-服务配置"><a href="#3-2-Docker-服务配置" class="headerlink" title="3.2 Docker 服务配置"></a>3.2 Docker 服务配置</h2><ul>
<li><p>开机自启动：</p>
<div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">sudo</span> systemctl <span class="built_in">enable</span> docker</span><br></pre></td></tr></table></figure></div>
</li>
<li><p>运行<code>docker</code>：</p>
<div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">sudo</span> systemctl start docker</span><br></pre></td></tr></table></figure></div></li>
</ul>
<h1 id="4-虚拟机内的网络配置"><a href="#4-虚拟机内的网络配置" class="headerlink" title="4.虚拟机内的网络配置"></a>4.虚拟机内的网络配置</h1><h2 id="4-1-查看网络接口信息"><a href="#4-1-查看网络接口信息" class="headerlink" title="4.1 查看网络接口信息"></a>4.1 查看网络接口信息</h2><ul>
<li><p>查看网络接口：</p>
<div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">ip addr</span><br><span class="line"></span><br><span class="line"><span class="comment"># 或者（不一定能用，可能没有预装 net-tools）</span></span><br><span class="line">ifconfig</span><br></pre></td></tr></table></figure></div>
</li>
<li><p>输出结果：</p>
<div class="highlight-container" data-rel="Txt"><figure class="iseeu highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">~</span><br><span class="line">❯ ip addr</span><br><span class="line">1: lo: &lt;LOOPBACK,UP,LOWER_UP&gt; mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000</span><br><span class="line">    link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00</span><br><span class="line">    inet 127.0.0.1/8 scope host lo</span><br><span class="line">       valid_lft forever preferred_lft forever</span><br><span class="line">    inet6 ::1/128 scope host noprefixroute </span><br><span class="line">       valid_lft forever preferred_lft forever</span><br><span class="line">2: enp0s3: &lt;BROADCAST,MULTICAST,UP,LOWER_UP&gt; mtu 1500 qdisc fq_codel state UP group default qlen 1000</span><br><span class="line">    link/ether 08:00:27:ff:93:f7 brd ff:ff:ff:ff:ff:ff</span><br><span class="line">    inet 192.168.2.23/24 brd 192.168.2.255 scope global dynamic noprefixroute enp0s3</span><br><span class="line">       valid_lft 85878sec preferred_lft 85878sec</span><br><span class="line">    inet6 fe80::d521:edc1:580f:1e00/64 scope link noprefixroute </span><br><span class="line">       valid_lft forever preferred_lft forever</span><br><span class="line">3: docker0: &lt;NO-CARRIER,BROADCAST,MULTICAST,UP&gt; mtu 1500 qdisc noqueue state DOWN group default </span><br><span class="line">    link/ether 02:42:8a:53:e6:cf brd ff:ff:ff:ff:ff:ff</span><br><span class="line">    inet 172.17.0.1/16 brd 172.17.255.255 scope global docker0</span><br><span class="line">       valid_lft forever preferred_lft forever</span><br><span class="line"></span><br></pre></td></tr></table></figure></div></li>
</ul>
<p>这里需要着重记下第二个<code>enp0s3</code>接口，第一个和第三个不用管。从<code>inet 192.168.2.23/24</code>可以知道虚拟机的<code>ipaddr</code>是<code>192.168.2.23</code>。</p>
<p><strong>下面是三个网络接口的详细解释：</strong></p>
<ol>
<li><strong><code>lo</code>（Loopback接口）</strong></li>
</ol>
<ul>
<li><strong>描述：</strong>  这是本地回环接口，用于主机内部的网络通信。它的IP地址是<code>127.0.0.1</code>，也被称为<code>localhost</code>。</li>
<li><strong>属性</strong>:<ul>
<li><strong>IP 地址：</strong> <code>127.0.0.1/8</code> 和 <code>::1/128</code></li>
<li><strong>用途：</strong> 允许主机内部进程进行网络通信，而不实际发送数据到网络接口外部。适用于测试和进程间通信。</li>
<li><strong>状态：</strong> 总是<code>UP</code>，表示接口始终可用。</li>
</ul>
</li>
</ul>
<ol start="2">
<li><strong><code>enp0s3</code>（以太网接口）</strong></li>
</ol>
<ul>
<li><strong>描述：</strong> 这是一个物理以太网接口，通常用于连接到网络交换机或路由器。</li>
<li><strong>属性：</strong> <ul>
<li><strong>MAC 地址：</strong> <code>08:00:27:ff:93:f7</code></li>
<li><strong>IP 地址：</strong> <code>192.168.2.23/24</code>（子网掩码为255.255.255.0），它的广播地址是<code>192.168.2.255</code>。</li>
<li><strong>IPv6 地址：</strong> <code>fe80::d521:edc1:580f:1e00/64</code></li>
<li><strong>状态：</strong> <code>UP</code>，表示接口已激活并连接到网络。</li>
<li><strong>用途：</strong> 用于连接到局域网或互联网，并提供主机的网络连接。</li>
</ul>
</li>
</ul>
<ol start="3">
<li><strong><code>docker0</code>（Docker虚拟网桥）</strong></li>
</ol>
<ul>
<li><strong>描述：</strong> 这是Docker默认创建的虚拟网桥，所有未指定其他网络的Docker容器默认连接到这个桥接网络。</li>
<li><strong>属性</strong>:<ul>
<li><strong>MAC 地址：</strong> <code>02:42:8a:53:e6:cf</code></li>
<li><strong>IP 地址：</strong> <code>172.17.0.1/16</code>，这是Docker的默认子网，用于容器之间的网络通信。</li>
<li><strong>状态：</strong> <code>DOWN</code>，表示虚拟网桥目前没有活动的连接。即使接口状态是<code>DOWN</code>，Docker可以在需要时自动启用它。</li>
<li><strong>用途：</strong> 提供一个虚拟的网络环境，使Docker容器能够互相通信并访问网络。</li>
</ul>
</li>
</ul>
<h2 id="4-2-开启混杂模式-promisc"><a href="#4-2-开启混杂模式-promisc" class="headerlink" title="4.2 开启混杂模式(promisc)"></a>4.2 开启混杂模式(promisc)</h2><p>开启网卡混杂模式，且虚拟机和docker里都要开启网卡混杂模式，这里网卡标记根据自己的填写：</p>
<div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">sudo</span> ip <span class="built_in">link</span> <span class="built_in">set</span> enp0s3 promisc on</span><br></pre></td></tr></table></figure></div>
<p>注意：在我这里是对<code>enp0s3</code>，但是每台电脑情况可能不一样，反正肯定是有<code>ipaddr</code>的这个网络接口名。</p>
<h2 id="4-3-建立-docker-子网"><a href="#4-3-建立-docker-子网" class="headerlink" title="4.3 建立 docker 子网"></a>4.3 建立 docker 子网</h2><p>专门建立一个子网，且该网络与家里的局域网在一个网段，网段和网关填自己的：</p>
<div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">sudo</span> docker network create -d macvlan --subnet=192.168.2.0/24 --gateway=192.168.2.1 -o parent=enp0s3 macnet</span><br></pre></td></tr></table></figure></div>
<p>参数说明：</p>
<ul>
<li><code>subnet</code>是要写你自己路由器所在的那个 <strong>网段</strong> 。</li>
<li><code>gateway</code>是要写你自己路由器所在的那个 <strong>网关</strong> ，也就是路由器的<code>ipaddr</code>。</li>
<li><code>parent</code>是虚拟（子）网卡的真实父级网卡，也就是刚才看的本地网卡（第二个网络接口）。</li>
<li><code>macnet</code>是子网名。</li>
</ul>
<p>可以查看网卡是否创建成功：</p>
<div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">sudo</span> docker network <span class="built_in">ls</span></span><br></pre></td></tr></table></figure></div>

<p>输出结果如下：</p>
<div class="highlight-container" data-rel="Txt"><figure class="iseeu highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">NETWORK ID     NAME      DRIVER    SCOPE</span><br><span class="line">2731fcf199c8   bridge    bridge    local</span><br><span class="line">556f62e40e30   host      host      local</span><br><span class="line">877d2632a9d1   macnet    macvlan   local</span><br><span class="line">5864881e2dd0   none      null      local</span><br></pre></td></tr></table></figure></div>

<p>解释：<br>这四个网络接口是在Docker中使用的不同类型的网络驱动程序。每个网络驱动程序具有不同的用途和功能：</p>
<ol>
<li><strong><code>bridge</code> 网络</strong></li>
</ol>
<ul>
<li><strong>驱动程序</strong> : <code>bridge</code></li>
<li><strong>作用</strong>: 默认的网络驱动程序，提供容器之间的网络通信。它创建了一个虚拟网络桥（<code>docker0</code>），所有使用<code>bridge</code>网络的容器都会连接到这个桥上。</li>
<li><strong>使用场景</strong> : 当你使用Docker创建容器并不指定自定义网络时，Docker默认会将容器连接到<code>bridge</code>网络。容器可以通过这个网络相互通信，也可以访问宿主机的网络。</li>
</ul>
<ol start="2">
<li><strong><code>host</code> 网络</strong></li>
</ol>
<ul>
<li><strong>驱动程序：</strong> <code>host</code></li>
<li><strong>作用</strong> : 将容器的网络堆栈与宿主机的网络堆栈直接连接。这意味着容器不会获得一个独立的<code>IP</code>地址，而是使用宿主机的<code>IP</code>地址。容器内的网络设置将与宿主机相同。</li>
<li><strong>使用场景</strong>: 当你需要容器与宿主机之间的网络高度集成，或者需要容器直接使用宿主机的网络接口时，使用<code>host</code>网络。常用于性能优化或特殊网络配置需求。</li>
</ul>
<ol start="3">
<li><strong><code>macnet</code> 网络</strong></li>
</ol>
<ul>
<li><strong>驱动程序：</strong> <code>macvlan</code></li>
<li><strong>作用</strong>: 提供MAC地址级别的网络隔离。每个连接到<code>macvlan</code>网络的容器可以被分配一个独立的MAC地址，从而在网络中表现为独立的物理设备。</li>
<li><strong>使用场景：</strong> 当需要在物理网络中隔离不同的容器，并且每个容器需要有一个独立的MAC地址时，使用<code>macvlan</code>网络。适用于需要直接与物理网络交换数据的容器，例如在一些网络设备上工作时。</li>
</ul>
<ol start="4">
<li><strong><code>none</code> 网络</strong></li>
</ol>
<ul>
<li><strong>驱动程序：</strong> <code>null</code></li>
<li><strong>作用：</strong> 容器不使用任何网络接口。它会创建一个没有网络连接的容器环境。</li>
<li><strong>使用场景：</strong> 当你希望容器完全隔离于网络之外，不与任何网络通信时，使用<code>none</code>网络。这适用于需要完全网络隔离的容器场景，如某些安全或测试需求。</li>
</ul>
<p>删除网卡(前提是要停止正在使用该网卡的容器)：</p>
<div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">sudo</span> docker network <span class="built_in">rm</span> &lt;网卡名&gt;</span><br></pre></td></tr></table></figure></div>

<h1 id="5-搭建-Openwrt"><a href="#5-搭建-Openwrt" class="headerlink" title="5.搭建 Openwrt"></a>5.搭建 Openwrt</h1><h2 id="5-1-拉取镜像"><a href="#5-1-拉取镜像" class="headerlink" title="5.1 拉取镜像"></a>5.1 拉取镜像</h2><p>可以通过阿里云镜像提升镜像拉取速度：</p>
<div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">sudo</span> docker pull registry.cn-hangzhou.aliyuncs.com/zzsrv/openwrt:latest</span><br></pre></td></tr></table></figure></div>

<h2 id="5-2-创建容器"><a href="#5-2-创建容器" class="headerlink" title="5.2 创建容器"></a>5.2 创建容器</h2><div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">sudo</span> docker run --restart always --name opt3 -d --network macnet --ip 192.168.2.3 --privileged registry.cn-hangzhou.aliyuncs.com/zzsrv/openwrt:latest /sbin/init</span><br></pre></td></tr></table></figure></div>
<p>参数说明：</p>
<ul>
<li><code>run --restart</code>：设置容器的重启策略为“总是重启”。如果容器停止或<code>Docker</code>守护进程重启，<code>Docker</code>将自动重启这个容器。</li>
<li><code>--network macnet</code>：指定容器连接到名为<code>macnet</code>（我们刚刚创的那个子网卡）的<code>Docker</code>网络。</li>
<li><code>--ip 192.168.2.3</code>：为容器分配一个静态IP地址<code>192.168.2.3</code>，在<code>macnet</code>网络范围内。一定要确保该<code>IP</code>地址在网络的子网中并且未被其他设备占用。</li>
<li><code>/sbin/init</code>：容器启动时要执行的命令或程序。容器将运行<code>/sbin/init</code>，这是 Openwrt系统中的初始化进程，通常是启动系统的第一步。</li>
</ul>
<h2 id="5-3-容器配置"><a href="#5-3-容器配置" class="headerlink" title="5.3 容器配置"></a>5.3 容器配置</h2><p>进入容器内部：</p>
<div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">sudo</span> docker <span class="built_in">exec</span> -it opt3 /bin/sh</span><br></pre></td></tr></table></figure></div>

<p>配置网络：</p>
<div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vi /etc/config/network</span><br></pre></td></tr></table></figure></div>
<p>按<code>i</code>键进入编辑，<code>esc</code>键退出编辑，<code>:wq</code>保存并退出。<br>需要把<code>ipaddr</code>设置为在创建容器时设置的<code>IP</code>，即<code>192.168.2.3</code>；<code>gateway</code>和<code>dns</code>都设置为网关地址（路由器地址），我的是<code>192.168.2.1</code>。<br><figure class="image-caption"><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="https://im.gurl.eu.org/file/5cbd9d8cdb9722e37a8eb.png"
                      alt="如图所示"
                ><figcaption>如图所示</figcaption></figure></p>
<p>重置网络使网络配置生效：</p>
<div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">/etc/init.d/network restart</span><br></pre></td></tr></table></figure></div>

<p>到这一步，整个流程就彻底结束了，回到主机，在浏览器输入地址<code>192.168.2.3</code>（你自己的容器设置的<code>IP</code>地址），应该就能进入<code>Openwrt</code>的登录界面了，默认是没有密码可以直接点击登录的。<br><figure class="image-caption"><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="https://im.gurl.eu.org/file/e906fa1645fab9b347b8d.png"
                      alt="登录界面"
                ><figcaption>登录界面</figcaption></figure></p>
<p>后面我先学一下怎么用<code>OpenClash</code>，然后更新用<code>OpenClash</code>科学上网的教程。</p>
<h1 id="6-实体机中安装-docker-OpenWrt-的配置"><a href="#6-实体机中安装-docker-OpenWrt-的配置" class="headerlink" title="6.实体机中安装 docker + OpenWrt 的配置"></a>6.实体机中安装 docker + OpenWrt 的配置</h1><h2 id="6-1-问题说明"><a href="#6-1-问题说明" class="headerlink" title="6.1 问题说明"></a>6.1 问题说明</h2><p>前面的步骤与在虚拟机中的一样，但是在创建并配置好 OpenWrt 的容器后，你会发现在宿主机中无法访问<code>192.168.2.3</code>（创建的容器的ip addr），但是其它设备（前提是在同一个网关下，比如手机）是能成功访问<code>192.168.2.3</code>的。</p>
<p><strong>原因：</strong></p>
<p>在<code>Docker</code>中使用<code>macvlan</code>网络驱动时，容器和宿主机的网络栈是分离的。这意味着：</p>
<ul>
<li>容器的网络接口<code>192.168.2.3</code>是在<code>macvlan</code>网络上，而宿主机的网络接口不能直接与<code>macvlan</code>网络中的容器进行通信。</li>
<li>因为<code>macvlan</code>网络的特性，宿主机的网络接口不会自动知道<code>macvlan</code>网络中的设备。</li>
</ul>
<h2 id="6-2-解决办法"><a href="#6-2-解决办法" class="headerlink" title="6.2 解决办法"></a>6.2 解决办法</h2><h3 id="6-2-1-创建-maclan-接口"><a href="#6-2-1-创建-maclan-接口" class="headerlink" title="6.2.1 创建 maclan 接口"></a>6.2.1 创建 maclan 接口</h3><p>创建一个名为<code>macvlan0</code>的新虚拟网络接口，它基于物理接口<code>enp0s3</code>：</p>
<div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">sudo</span> ip <span class="built_in">link</span> add macvlan0 <span class="built_in">link</span> enp0s3 <span class="built_in">type</span> macvlan mode bridge</span><br></pre></td></tr></table></figure></div>
<p><code>macvlan</code>允许在一个物理网络接口上创建多个虚拟网络接口，每个都有自己的 MAC 地址。桥接模式允许 macvlan 接口相互通信。</p>
<p>为这个新接口分配了 IP 地址<code>192.168.2.250</code>，使其成为<code>192.168.2.0/24</code>网络的一部分：</p>
<div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">sudo</span> ip addr add 192.168.2.250/24 dev macvlan0</span><br></pre></td></tr></table></figure></div>
<p>激活这个新接口，使其能够开始网络通信：</p>
<div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">sudo</span> ip <span class="built_in">link</span> <span class="built_in">set</span> macvlan0 up</span><br></pre></td></tr></table></figure></div>

<p>注意需要把<code>enp0s3</code>替换为自己实际的网络驱动接口。这个时候在浏览器输入<code>192.168.2.3</code>就拿正常访问了。</p>
<p>这种配置的主要用途是允许主机直接参与到<code>macvlan</code>网络中，这对于与 Docker macvlan 网络中的容器通信特别有用。它创建了一个”桥梁”，让主机能够与 macvlan 网络中的设备（如 Docker 容器）进行直接通信，而不需要通过 Docker 的网络栈。</p>
<h3 id="6-2-2-撤销创建的-macvlan-配置"><a href="#6-2-2-撤销创建的-macvlan-配置" class="headerlink" title="6.2.2 撤销创建的 macvlan 配置"></a>6.2.2 撤销创建的 macvlan 配置</h3><p>如果要删除创建的<code>macvlan</code>接口，可以进行以下操作：</p>
<ol>
<li>删除 IP 地址:<div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">sudo</span> ip addr del 192.168.2.250/24 dev macvlan0</span><br></pre></td></tr></table></figure></div></li>
<li>关闭 macvlan 接口:<div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">sudo</span> ip <span class="built_in">link</span> <span class="built_in">set</span> macvlan0 down</span><br></pre></td></tr></table></figure></div></li>
<li>删除 macvlan 接口:<div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">sudo</span> ip <span class="built_in">link</span> del macvlan0</span><br></pre></td></tr></table></figure></div></li>
</ol>
<p>解释：</p>
<ul>
<li><code>ip addr del</code>: 删除之前添加的 IP 地址</li>
<li><code>ip link set down</code>: 关闭网络接口</li>
<li><code>ip link del</code>: 完全删除网络接口</li>
</ul>
<p>执行这些命令后，你创建的<code>macvlan</code>接口及其配置就会被完全移除。</p>
<p>额外提示：</p>
<h3 id="6-2-3-查看当前配置"><a href="#6-2-3-查看当前配置" class="headerlink" title="6.2.3  查看当前配置:"></a>6.2.3  查看当前配置:</h3><p>   在执行这些步骤之前和之后，你可以使用以下命令查看网络配置，以确保更改已经生效：<br>   <div class="highlight-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ip addr show</span><br><span class="line">ip <span class="built_in">link</span> show</span><br></pre></td></tr></table></figure></div></p>
<ol start="2">
<li><p>保存配置:<br>如果你经常需要切换这些配置，可以考虑创建脚本来自动化这个过程。例如，创建一个脚本来添加配置，另一个脚本来删除配置。</p>
</li>
<li><p>系统重启:<br>请注意，这些更改在系统重启后不会保持。如果你希望这些更改是永久的，需要将它们添加到网络配置文件中或创建一个系统启动脚本。</p>
</li>
<li><p>小心操作:<br>在执行这些命令时要小心，特别是如果你是通过远程连接（如 SSH）管理系统。错误的网络配置可能会导致你失去对系统的访问。</p>
</li>
</ol>
<h1 id="7-参考教程"><a href="#7-参考教程" class="headerlink" title="7.参考教程"></a>7.参考教程</h1><ul>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=6OeGOK2-1zo&list=PL7XUZPsvfw3CKvDijuA5CO_oLbBwJCYTt&index=4" >docker + openwrt把windows变成最强软路由，游戏、翻墙两不误(Linux-Mint&#x2F;ubuntu、VirtualBox、docker、openwrt) <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=mlsTzDsBhLs&list=PL7XUZPsvfw3CKvDijuA5CO_oLbBwJCYTt&index=6" >Openwrt Docker 镜像 安装详细过程实现科学上网，没有设备也可以体验|软路由|旁路网关 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://hub.docker.com/r/zzsrv/openwrt" >zzsrv&#x2F;openwrt <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></li>
</ul>

        </div>

        
            <div class="post-copyright-info w-full my-8 px-2 sm:px-6 md:px-8">
                <div class="article-copyright-info-container">
    <ul>
        <li><strong>Title:</strong> Openwrt 在 Docker 下运行并作为旁路由</li>
        <li><strong>Author:</strong> loskyertt</li>
        <li><strong>Created at
                :</strong> 2024-07-30 01:32:03</li>
        
            <li>
                <strong>Updated at
                    :</strong> 2024-08-09 16:41:50
            </li>
        
        <li>
            <strong>Link:</strong> https://redefine.ohevan.com/2024/07/30/Docker-Openwrt/
        </li>
        <li>
            <strong>
                License:
            </strong>
            

            
                This work is licensed under <a class="license" target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0">CC BY-NC-SA 4.0</a>.
            
        </li>
    </ul>
</div>

            </div>
        

        
            <ul class="post-tags-box text-lg mt-1.5 flex-wrap justify-center flex md:hidden">
                
                    <li class="tag-item mx-0.5">
                        <a href="/tags/docker/">#docker</a>&nbsp;
                    </li>
                
                    <li class="tag-item mx-0.5">
                        <a href="/tags/linux/">#linux</a>&nbsp;
                    </li>
                
                    <li class="tag-item mx-0.5">
                        <a href="/tags/proxy/">#proxy</a>&nbsp;
                    </li>
                
                    <li class="tag-item mx-0.5">
                        <a href="/tags/openwrt/">#openwrt</a>&nbsp;
                    </li>
                
                    <li class="tag-item mx-0.5">
                        <a href="/tags/%E8%99%9A%E6%8B%9F%E6%9C%BA/">#虚拟机</a>&nbsp;
                    </li>
                
            </ul>
        

        
  <div class="recommended-article px-2 sm:px-6 md:px-8">
   <div class="recommended-desktop">
    <div class="recommended-article-header text-xl md:text-3xl font-bold mt-10">
     <i aria-hidden="true"></i><span>推荐阅读</span>
    </div>
    <div class="recommended-article-group"><a class="recommended-article-item" href="/2024/08/26/Dokcer容器代理/" title="在 Docker 容器中使用宿主机的代理" rel="bookmark">
  <img src="/images/wallhaven-wqery6-light.webp" alt="在 Docker 容器中使用宿主机的代理" class="!max-w-none">
  <span class="title">在 Docker 容器中使用宿主机的代理</span>
</a><a class="recommended-article-item" href="/2024/07/24/Docker教程/" title="Docker 教程" rel="bookmark">
  <img src="/images/wallhaven-wqery6-light.webp" alt="Docker 教程" class="!max-w-none">
  <span class="title">Docker 教程</span>
</a><a class="recommended-article-item" href="/2024/07/24/Docker问题汇总/" title="使用Docker时的问题汇总和解决方式" rel="bookmark">
  <img src="/images/wallhaven-wqery6-light.webp" alt="使用Docker时的问题汇总和解决方式" class="!max-w-none">
  <span class="title">使用Docker时的问题汇总和解决方式</span>
</a></div>
   </div>
   <div class="recommended-mobile">
   <div class="recommended-article-header text-xl md:text-3xl font-bold mt-10">
     <i aria-hidden="true"></i><span>推荐阅读</span>
   </div>
   <div class="recommended-article-group"><a class="recommended-article-item" href="/2024/08/26/Dokcer容器代理/" title="在 Docker 容器中使用宿主机的代理" rel="bookmark">
  <img src="/images/wallhaven-wqery6-light.webp" alt="在 Docker 容器中使用宿主机的代理" class="!max-w-none">
  <span class="title">在 Docker 容器中使用宿主机的代理</span>
</a><a class="recommended-article-item" href="/2024/07/24/Docker教程/" title="Docker 教程" rel="bookmark">
  <img src="/images/wallhaven-wqery6-light.webp" alt="Docker 教程" class="!max-w-none">
  <span class="title">Docker 教程</span>
</a></div>
   </div>
  </div>

        
            <div class="article-nav my-8 flex justify-between items-center px-2 sm:px-6 md:px-8">
                
                    <div class="article-prev border-border-color shadow-redefine-flat shadow-shadow-color-2 rounded-medium px-4 py-2 hover:shadow-redefine-flat-hover hover:shadow-shadow-color-2">
                        <a class="prev"
                        rel="prev"
                        href="/2024/07/30/Openssh%E9%85%8D%E7%BD%AE/"
                        >
                            <span class="left arrow-icon flex justify-center items-center">
                                <i class="fa-solid fa-chevron-left"></i>
                            </span>
                            <span class="title flex justify-center items-center">
                                <span class="post-nav-title-item">Win10 SSH 服务配置</span>
                                <span class="post-nav-item">Prev posts</span>
                            </span>
                        </a>
                    </div>
                
                
                    <div class="article-next border-border-color shadow-redefine-flat shadow-shadow-color-2 rounded-medium px-4 py-2 hover:shadow-redefine-flat-hover hover:shadow-shadow-color-2">
                        <a class="next"
                        rel="next"
                        href="/2024/07/25/MiHomo%E6%95%99%E7%A8%8B/"
                        >
                            <span class="title flex justify-center items-center">
                                <span class="post-nav-title-item">MiHomo(Clash Meta) 纯内核使用教程</span>
                                <span class="post-nav-item">Next posts</span>
                            </span>
                            <span class="right arrow-icon flex justify-center items-center">
                                <i class="fa-solid fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        


        
            <div class="comment-container px-2 sm:px-6 md:px-8 pb-8">
                <div class="comments-container mt-10 w-full ">
    <div id="comment-anchor" class="w-full h-2.5"></div>
    <div class="comment-area-title w-full my-1.5 md:my-2.5 text-xl md:text-3xl font-bold">
        Comments
    </div>
    

        
            
    <div id="waline"></div>
    <script type="module" data-swup-reload-script>
      import { init } from '/js/libs/waline.mjs';

      function loadWaline() {
        init({
          el: '#waline',
          serverURL: 'https://example.example.com',
          lang: 'zh-CN',
          dark: 'body[class~="dark-mode"]',
          reaction: false,
          requiredMeta: ['nick', 'mail'],
          emoji: [],
          recaptchaV3Key: "wasd",
          
        });
      }

      if (typeof swup !== 'undefined') {
        loadWaline();
      } else {
        window.addEventListener('DOMContentLoaded', loadWaline);
      }
    </script>



        
    
</div>

            </div>
        
    </div>

    
        <div class="toc-content-container">
            <div class="post-toc-wrap">
    <div class="post-toc">
        <div class="toc-title">On this page</div>
        <div class="page-title">Openwrt 在 Docker 下运行并作为旁路由</div>
        <ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#1-%E5%89%8D%E8%A8%80"><span class="nav-text">1.前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#2-%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C"><span class="nav-text">2.准备工作</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#2-1-%E8%99%9A%E6%8B%9F%E6%9C%BA%E5%AE%89%E8%A3%85"><span class="nav-text">2.1 虚拟机安装</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-2-Linux%E5%AE%89%E8%A3%85"><span class="nav-text">2.2 Linux安装</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-3-%E8%99%9A%E6%8B%9F%E6%9C%BA%E7%9A%84%E5%88%9B%E5%BB%BA"><span class="nav-text">2.3 虚拟机的创建</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-4-%E8%99%9A%E6%8B%9F%E6%9C%BA%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="nav-text">2.4 虚拟机的配置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-5-%E5%AE%89%E8%A3%85%E7%B3%BB%E7%BB%9F"><span class="nav-text">2.5 安装系统</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#3-Docker-%E9%85%8D%E7%BD%AE"><span class="nav-text">3.Docker 配置</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#3-1-%E5%AE%89%E8%A3%85-Docker"><span class="nav-text">3.1 安装 Docker</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-2-Docker-%E6%9C%8D%E5%8A%A1%E9%85%8D%E7%BD%AE"><span class="nav-text">3.2 Docker 服务配置</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#4-%E8%99%9A%E6%8B%9F%E6%9C%BA%E5%86%85%E7%9A%84%E7%BD%91%E7%BB%9C%E9%85%8D%E7%BD%AE"><span class="nav-text">4.虚拟机内的网络配置</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#4-1-%E6%9F%A5%E7%9C%8B%E7%BD%91%E7%BB%9C%E6%8E%A5%E5%8F%A3%E4%BF%A1%E6%81%AF"><span class="nav-text">4.1 查看网络接口信息</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-2-%E5%BC%80%E5%90%AF%E6%B7%B7%E6%9D%82%E6%A8%A1%E5%BC%8F-promisc"><span class="nav-text">4.2 开启混杂模式(promisc)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-3-%E5%BB%BA%E7%AB%8B-docker-%E5%AD%90%E7%BD%91"><span class="nav-text">4.3 建立 docker 子网</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#5-%E6%90%AD%E5%BB%BA-Openwrt"><span class="nav-text">5.搭建 Openwrt</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#5-1-%E6%8B%89%E5%8F%96%E9%95%9C%E5%83%8F"><span class="nav-text">5.1 拉取镜像</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-2-%E5%88%9B%E5%BB%BA%E5%AE%B9%E5%99%A8"><span class="nav-text">5.2 创建容器</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-3-%E5%AE%B9%E5%99%A8%E9%85%8D%E7%BD%AE"><span class="nav-text">5.3 容器配置</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#6-%E5%AE%9E%E4%BD%93%E6%9C%BA%E4%B8%AD%E5%AE%89%E8%A3%85-docker-OpenWrt-%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="nav-text">6.实体机中安装 docker + OpenWrt 的配置</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#6-1-%E9%97%AE%E9%A2%98%E8%AF%B4%E6%98%8E"><span class="nav-text">6.1 问题说明</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-2-%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95"><span class="nav-text">6.2 解决办法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#6-2-1-%E5%88%9B%E5%BB%BA-maclan-%E6%8E%A5%E5%8F%A3"><span class="nav-text">6.2.1 创建 maclan 接口</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#6-2-2-%E6%92%A4%E9%94%80%E5%88%9B%E5%BB%BA%E7%9A%84-macvlan-%E9%85%8D%E7%BD%AE"><span class="nav-text">6.2.2 撤销创建的 macvlan 配置</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#6-2-3-%E6%9F%A5%E7%9C%8B%E5%BD%93%E5%89%8D%E9%85%8D%E7%BD%AE"><span class="nav-text">6.2.3  查看当前配置:</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#7-%E5%8F%82%E8%80%83%E6%95%99%E7%A8%8B"><span class="nav-text">7.参考教程</span></a></li></ol>

    </div>
</div>
        </div>
    
</div>



                

            </div>

            

        </div>

        <div class="main-content-footer">
            <footer class="footer mt-5 py-5 h-auto text-base text-third-text-color relative border-t-2 border-t-border-color">
    <div class="info-container py-3 text-center">
        
        <div class="text-center">
            &copy;
            
              <span>2022</span>
              -
            
            2024&nbsp;&nbsp;<i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 0.5s; color: #f54545"></i>&nbsp;&nbsp;<a href="/">loskyertt</a>
            
                
                <p class="post-count space-x-0.5">
                    <span>
                        15 posts in total
                    </span>
                    
                        <span>
                            17.2k words in total
                        </span>
                    
                </p>
            
        </div>
        
            <script data-swup-reload-script src="https://cn.vercount.one/js"></script>
            <div class="relative text-center lg:absolute lg:right-[20px] lg:top-1/2 lg:-translate-y-1/2 lg:text-right">
                
                    <span id="busuanzi_container_site_uv" class="lg:!block">
                        <span class="text-sm">VISITOR COUNT</span>
                        <span id="busuanzi_value_site_uv"></span>
                    </span>
                
                
                    <span id="busuanzi_container_site_pv" class="lg:!block">
                        <span class="text-sm">TOTAL PAGE VIEWS</span>
                        <span id="busuanzi_value_site_pv"></span>
                    </span>
                
            </div>
        
        <div class="relative text-center lg:absolute lg:left-[20px] lg:top-1/2 lg:-translate-y-1/2 lg:text-left">
            <span class="lg:block text-sm">POWERED BY <?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="relative top-[2px] inline-block align-baseline" version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1rem" height="1rem" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path fill="#0E83CD" d="M256.4,25.8l-200,115.5L56,371.5l199.6,114.7l200-115.5l0.4-230.2L256.4,25.8z M349,354.6l-18.4,10.7l-18.6-11V275H200v79.6l-18.4,10.7l-18.6-11v-197l18.5-10.6l18.5,10.8V237h112v-79.6l18.5-10.6l18.5,10.8V354.6z"/></svg><a target="_blank" class="text-base" href="https://hexo.io">Hexo</a></span>
            <span class="text-sm lg:block">THEME&nbsp;<a class="text-base" target="_blank" href="https://github.com/EvanNotFound/hexo-theme-redefine">Redefine v2.6.4</a></span>
        </div>
        
        
            <div>
                Blog up for <span class="odometer" id="runtime_days" ></span> days <span class="odometer" id="runtime_hours"></span> hrs <span class="odometer" id="runtime_minutes"></span> Min <span class="odometer" id="runtime_seconds"></span> Sec
            </div>
        
        
            <script data-swup-reload-script>
                try {
                    function odometer_init() {
                    const elements = document.querySelectorAll('.odometer');
                    elements.forEach(el => {
                        new Odometer({
                            el,
                            format: '( ddd).dd',
                            duration: 200
                        });
                    });
                    }
                    odometer_init();
                } catch (error) {}
            </script>
        
        
        
    </div>  
</footer>
        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="article-tools-list">
        <!-- TOC aside toggle -->
        
            <li class="right-bottom-tools page-aside-toggle">
                <i class="fa-regular fa-outdent"></i>
            </li>
        

        <!-- go comment -->
        
            <li class="go-comment">
                <i class="fa-regular fa-comments"></i>
            </li>
        
    </ul>
</div>

        </div>
    

    <div class="right-side-tools-container">
        <div class="side-tools-container">
    <ul class="hidden-tools-list">
        <li class="right-bottom-tools tool-font-adjust-plus flex justify-center items-center">
            <i class="fa-regular fa-magnifying-glass-plus"></i>
        </li>

        <li class="right-bottom-tools tool-font-adjust-minus flex justify-center items-center">
            <i class="fa-regular fa-magnifying-glass-minus"></i>
        </li>

        <li class="right-bottom-tools tool-dark-light-toggle flex justify-center items-center">
            <i class="fa-regular fa-moon"></i>
        </li>

        <!-- rss -->
        

        

        <li class="right-bottom-tools tool-scroll-to-bottom flex justify-center items-center">
            <i class="fa-regular fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="visible-tools-list">
        <li class="right-bottom-tools toggle-tools-list flex justify-center items-center">
            <i class="fa-regular fa-cog fa-spin"></i>
        </li>
        
            <li class="right-bottom-tools tool-scroll-to-top flex justify-center items-center">
                <i class="arrow-up fas fa-arrow-up"></i>
                <span class="percent"></span>
            </li>
        
        
    </ul>
</div>

    </div>

    <div class="image-viewer-container">
    <img src="">
</div>


    
        <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
          <span class="search-input-field-pre">
            <i class="fa-solid fa-keyboard"></i>
          </span>
            <div class="search-input-container">
                <input autocomplete="off"
                       autocorrect="off"
                       autocapitalize="off"
                       placeholder="Search..."
                       spellcheck="false"
                       type="search"
                       class="search-input"
                >
            </div>
            <span class="popup-btn-close">
                <i class="fa-solid fa-times"></i>
            </span>
        </div>
        <div id="search-result">
            <div id="no-result">
                <i class="fa-solid fa-spinner fa-spin-pulse fa-5x fa-fw"></i>
            </div>
        </div>
    </div>
</div>

    

</main>


    
<script src="/js/libs/Swup.min.js"></script>

<script src="/js/libs/SwupSlideTheme.min.js"></script>

<script src="/js/libs/SwupScriptsPlugin.min.js"></script>

<script src="/js/libs/SwupProgressPlugin.min.js"></script>

<script src="/js/libs/SwupScrollPlugin.min.js"></script>

<script src="/js/libs/SwupPreloadPlugin.min.js"></script>

<script>
    const swup = new Swup({
        plugins: [
            new SwupScriptsPlugin({
                optin: true,
            }),
            new SwupProgressPlugin(),
            new SwupScrollPlugin({
                offset: 80,
            }),
            new SwupSlideTheme({
                mainElement: ".main-content-body",
            }),
            new SwupPreloadPlugin(),
        ],
        containers: ["#swup"],
    });
</script>







<script src="/js/tools/imageViewer.js" type="module"></script>

<script src="/js/utils.js" type="module"></script>

<script src="/js/main.js" type="module"></script>

<script src="/js/layouts/navbarShrink.js" type="module"></script>

<script src="/js/tools/scrollTopBottom.js" type="module"></script>

<script src="/js/tools/lightDarkSwitch.js" type="module"></script>

<script src="/js/layouts/categoryList.js" type="module"></script>



    
<script src="/js/tools/localSearch.js" type="module"></script>




    
<script src="/js/tools/codeBlock.js" type="module"></script>




    
<script src="/js/layouts/lazyload.js" type="module"></script>




    
<script src="/js/tools/runtime.js"></script>

    
<script src="/js/libs/odometer.min.js"></script>

    
<link rel="stylesheet" href="/assets/odometer-theme-minimal.css">




  
<script src="/js/libs/Typed.min.js"></script>

  
<script src="/js/plugins/typed.js" type="module"></script>









<div class="post-scripts" data-swup-reload-script>
    
        
<script src="/js/tools/tocToggle.js" type="module"></script>

<script src="/js/layouts/toc.js" type="module"></script>

<script src="/js/plugins/tabs.js" type="module"></script>

    
</div>


</body>
</html>
